<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>‘视频’‘直播’切换</title>
    <style>
        .box{
            width: 300px;
            height: 500px;
            /* border: 1px solid gainsboro; */
        }
        .box .nav{
            height: 50px;
            /* border: 1px solid gainsboro; */
        }
        .box .nav span{
            display: inline-block;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            /* border: 1px solid red; */
        }
        .box .content{
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="nav">
            <span>视频</span>
            <span>直播</span>
        </div>
        <div class="content">
            
        </div>
    </div>
</body>
</html>
<script>
    let videoarr=['中央部署进一步优化防疫20条措施','70秒带你打卡互联网之光博览会','草莓上市部分品种近200元一斤','95后女生花1.96亿买下A股公司','俄为何突然从“关键战场”撤军?','本土感染激增 4省份连续3天超500例']
    let livearr= ['直播|双11全球快递"云监工"','慢直播|邂逅绝美云海日出','慢直播|天舟五号已到位，将于近日','慢直播|济南趵突泉————天下第一泉','直播|立冬拥抱暖阳','慢直播|邂逅绝美云海日出']
    let list=[{path:'/video',content:renderVideo},
              {path:'/live',content:renderLive}]
    // 获取按钮标签
    let btns=[...document.querySelectorAll('.box .nav span')]
    btns.forEach((item,index)=>{
        // 给每个标签添加点击事件
        item.onclick=()=>{
            // 遍历所有按钮标签，让按钮上的这两个样式不显示
            btns.forEach((item)=>{
                item.style.color=''
                item.style.borderTop=''
            })
            // 给点击的标签加上样式
            item.style.color='yellowgreen'
            item.style.borderTop='2px solid yellowgreen'
            // 添加一个新的历史记录(地址栏的地址会发生改变)
            history.pushState({},'',list[index].path)
            // 匹配信息
            switch (list[index].path) {
                case '/video':list[index].content();break;
                case '/live':list[index].content();break;
            }
        }
    })
    
    // 渲染‘视频’的内容
    function renderVideo() {
        document.querySelector('.box .content').innerHTML=videoarr.map(item=>{
            return `<p>${item}</p>`
        }).join('')
    }
    // 渲染‘直播’的内容
    function renderLive() {
        document.querySelector('.box .content').innerHTML=livearr.map(item=>{
            return `<p>${item}</p>`
        }).join('')
        document.querySelector('.box .content p:nth-child(3)').style.color='red'
    }
</script>